<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">{{ currentKnow?.name }}</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">{{ currentKnow?.name }}</view>
      </view>
    </view>
    <!-- #endif -->
    <!-- 考点详情详-选项卡 -->
    <uv-tabs class="uv-tabs" :list="knowExercise" :current="currentKnowIndex" lineBgSize="percentage" lineWidth="30"
      lineHeight="15" :lineColor="`url(${lineBg})`" :activeStyle="{
        padding: '8rpx 20rpx',
        color: '#000',
        fontSize: '28rpx',
        backgroundColor: '#fff',
        borderRadius: '28rpx',
        transform: 'scale(1)'
      }" :inactiveStyle="{
        padding: '8rpx 20rpx',
        fontSize: '28rpx',
        color: '#9b9c9c',
        backgroundColor: '#ecfff6',
        borderRadius: '28rpx',
        transform: 'scale(1)'
      }" itemStyle="padding-left: 5px; padding-right: 10px;margin-bottom:20px; height: 50px;"
      @change="tabsChange"></uv-tabs>

    <!-- 考点详情-详细内容 -->
    <swiper class="know-details" :current="currentKnowIndex" @change="swiperChange">
      <swiper-item class="know-details-item" v-for="(item, index) in knowExercise" :key="index">
        <view class="header">
          <view class="index">{{ currentKnowIndex + 1 }}/{{ knowExercise?.length }}</view>
          <view class="title">
            <text class="txt">{{ item.name }}<text class="line"></text></text>

          </view>
        </view>
        <scroll-view class="content" scroll-y>
          <uv-parse :content="getKnowDescription(item.id!)?.mediaContent" :tagStyle="knowExplainImgTagStyle"
            :show-img-menu="false"></uv-parse>
        </scroll-view>
        <view class="bottom">
          <view class="btn" @tap="toExercise(item.knowTypeCode!, item.id!)">相关试题(
            {{ item.questions?.length }})
          </view>
        </view>
      </swiper-item>
    </swiper>
    <!-- 考点详情-底部 -->
    <view class="footer">
      <view class="details">
        <view class="tag">精简题库</view>
        <view class="title">告别题海，高效刷题</view>
        <navigator class="nva-item" hover-class="none"
          :url="`/pagesExercise/selectBase/selectBase?baseType=${baseType}`">
          <view class="btn">
            去练习
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { ExerciseTypeEnum } from '@/api/constants'
  import type { KnowDescriptionVo } from '@/api/base/types'
  import type { KnowExerciseProgress } from '@/api/exam/types'

  import uvTabs from '@climblee/uv-ui/components/uv-tabs/uv-tabs.vue'
  import { useGetKnowExercise } from '@/composables/Exercise'
  import { getKnowDescApi } from '@/api/base'
  import uvParse from '@climblee/uv-ui/components/uv-parse/uv-parse.vue'

  // #ifdef MP
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif

  // 题库类型
  const baseType = ref<string>()
  // 当前考点练习
  const knowExercise = ref<KnowExerciseProgress[]>()
  // 当前考点的index
  const currentKnowIndex = ref<number>(0)
  // 当前考点
  const currentKnow = ref<KnowExerciseProgress>()
  // 考点描述信息
  const knowDescriptions = ref<KnowDescriptionVo[]>([])

  const lineBg = ''

  // 考点解析富文本图片样式
  const knowExplainImgTagStyle = ref({
    img: 'width: 50vw;margin-left:25vw;'
  })


  onLoad((options: any) => {
    baseType.value = options.baseType
    let knowTypeCode = options.knowTypeCode
    let knowId = options.knowId
    knowExercise.value = useGetKnowExercise(baseType.value!, knowTypeCode)
    console.log('knowExercise', knowExercise.value)
    currentKnowIndex.value = knowExercise.value?.findIndex(item => item.id == knowId) || 0
    currentKnow.value = knowExercise.value![currentKnowIndex.value!]
  })

  /**
 * 获取考点描述
 */
  const getKnowDescription = (knwoId: number) => {
    let knowDescription = knowDescriptions.value.find(item => item.id == knwoId)
    if (!knowDescription) {
      getKnowDescApi(knwoId).then(result => {
        knowDescription = result.data
        if (knowDescriptions.value.findIndex(item => item.id === knowDescription?.id) == -1) {
          knowDescriptions.value.push(knowDescription)
        }
      })
    }
    return knowDescription
  }

  // tabs通知swiper切换
  const tabsChange = (item: any) => {
    currentKnowIndex.value = item.index
  }
  // swiperChange
  const swiperChange = (e: UniHelper.SwiperOnChangeEvent) => {
    currentKnowIndex.value = e.detail.current
    currentKnow.value = knowExercise.value?.[currentKnowIndex.value]
  }

  // 去练习
  const toExercise = (knowTypeCode: string, knowId: number) => {
    uni.navigateTo({
      url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.KnowExerciseQuestions}&baseType=${baseType.value}&knowTypeCode=${knowTypeCode}&knowId=${knowId}`
    })
  }
  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-image: linear-gradient(180deg,
        #d0ffe7 0%,
        #f8f8f8 100%);
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 32rpx;
        // font-weight: bold;
      }
    }
  }

  /* #endif */

  .know-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: -8rpx 30rpx 30rpx;
    background-color: #ffffff;
    box-shadow: 7rpx 6rpx 5rpx 0rpx rgba(155, 155, 155, 0.04);
    border-radius: 33rpx;

    .know-details-item {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 0rpx 30rpx;
      box-sizing: border-box;

      .header {
        display: flex;
        flex-direction: column;
        height: 140rpx;

        .index {
          display: flex;
          justify-content: flex-end;
          margin-top: 30rpx;
          font-size: 26rpx;
          color: #828282;
        }

        .title {

          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 36rpx;
          font-weight: bold;
          color: #55b95d;

          .txt {
            position: relative;
            padding: 0 15rpx;
          }

          .line {
            position: absolute;
            top: 50%;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 10rpx;
            background-color: #def3e0;
            border-radius: 10rpx;
          }
        }

      }

      .content {
        font-size: 28rpx;
        line-height: 1.5;
      }

      .bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 150rpx;

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          color: #ffffff;
          width: 327rpx;
          height: 80rpx;
          background-color: #55b95d;
          border-radius: 40rpx;
        }
      }
    }


  }

  .footer {
    margin: 0 30rpx 30rpx;
    height: 200rpx;

    .details {
      display: flex;
      align-items: center;
      height: 74rpx;
      background-color: #ffffff;
      border-radius: 10rpx;

      .tag {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10rpx;
        margin-right: 20rpx;
        width: 110rpx;
        height: 40rpx;
        font-size: 22rpx;
        color: #55b95d;
        background-color: #e5f8f1;
        border-radius: 10rpx;
        font-weight: bold;

      }

      .title {
        flex: 1;
        font-size: 26rpx;
        color: #676767;
      }

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
        width: 110rpx;
        height: 40rpx;
        font-size: 22rpx;
        color: #55b95d;
        font-weight: bold;
        background-color: #e5f8f1;
        border-radius: 18rpx;

      }
    }
  }


</style>
